<template>
  <div class="md:flex">
    <template v-for="(item, index) in growCardList" :key="item.title">
      <Card
        size="small"
        :loading="loading"
        :title="item.title"
        class="md:w-1/4 w-full !md:mt-0 !mt-4 relative"
        :class="[index + 1 < 4 && '!md:mr-4']"
        :canExpan="false"
      >
        <template #extra>
          <Tag :color="item.color">{{ item.action }}</Tag>
        </template>

        <div class="py-4 px-4 flex justify-between">
          <CountTo prefix="¥" :startVal="1" :endVal="item.value" class="text-2xl" />

          <!-- <Icon :icon="item.icon" :size="40" /> -->
          <!-- <i class="iconfont icon-yinhangdaikuan"></i> -->
          <img src="../../../../assets/images/icon-xinqian.png" v-if="index === 0" width="42" alt="">
          <img src="../../../../assets/images/icon-pidai.png"  v-else-if="index === 1" width="42" alt="">
          <img src="../../../../assets/images/icon-fangkuan.png" v-else-if="index === 2"  width="42" alt="">
          <Icon :icon="item.icon" :size="40" v-else />
        </div>
       <span class="absolute right-14 top-1 month-total">
          <CountTo suffix="笔" :startVal="1" :endVal="item.monthCount" class="text-2xl" />
       </span>
      <Divider ></Divider>
        <div class="p-2 px-4 flex justify-between border-top divide-gray-200">
          <!-- <Button type="link" class="p-0">今日{{ item.title }}</Button> -->
          <span class="ant-btn-link cursor-pointer" @click="onClickGetDetails(index)"
            >今日{{ item.title }}</span
          >
          <!-- <span>总{{ item.title }}</span> -->
          <CountTo prefix="" :startVal="1" :endVal="item.total" suffix="笔" /> 
          <!-- <Button type="link">Link Button</Button> -->
        </div>
      </Card>
    </template>

    <Drawer
      :width="600"
      :title="titleDesc"
      :placement="placement"
      :visible="visible"
      @close="onClose"
    >
      <template #extra>
        <a-button style="margin-right: 8px" @click="onClose">Cancel</a-button>
        <a-button type="primary" @click="onClose">Submit</a-button>
      </template>
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </Drawer>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { CountTo } from '/@/components/CountTo/index';
  import { Icon } from '/@/components/Icon';
  import { Tag, Card, Button, Drawer,Divider } from 'ant-design-vue';
  import type { DrawerProps } from 'ant-design-vue';
  import { growCardList } from '../data';

  defineProps({
    loading: {
      type: Boolean,
    },
  });
  const titleDesc = ref('');
  const title = ref({
    '1': '新签',
    '2': '批贷',
    '3': '放款',
    '4': '核算',
  });
  const placement = ref<DrawerProps['placement']>('right');
  const visible = ref<boolean>(false);

  const onClose = () => {
    visible.value = false;
  };
  const onClickGetDetails = (type: number) => {
    titleDesc.value = `今日${title.value[type + 1]}`;
    visible.value = true;
  };
</script>
<style scoped lang="less">
::v-deep(.ant-divider-horizontal) {
  margin:6px 0;
}
  .month-total span{
    font-size:14px;
  }
</style>
